<template>
	<view class="client">
		<view class="client-for backgroundf margin-bottom-24" v-for="(item,index) in 10" :key="index">
			<view class="dis-cen">
				<view class="titles size-36">
					<text class="dings">顶</text> 张三<text class="size-32">（百度推广）</text>
				</view>
				<view class="cen size-26">意向客户</view>
			</view>
			<view class="miao color0 size-28"><text class="color9">手机号码：</text>199****9999</view>
			<view class="miao color0 size-28"><text class="color9">申请时间：</text>2025.12.34 00:00:00</view>
			<view class="miao color0 size-28 dis-ali">
				<text class="color9">客户条件备注：</text>
				<view>这里是备注有点长的备注备</view>
			</view>
			<view class="tiaos"></view>
			<view class="dis-cen">
				<view class="miao color0 size-28"><text class="color9">客户星级：</text>5星</view>
				<view class="button dis">
					<button class="button1 dis"><text class="size-24">置顶</text></button>
					<button class="button1 dis"><text class="size-24">详情</text></button>
					<button class="button2 dis"><text class="size-24">拨号</text></button>
				</view>
			</view>
		</view>
		<u-popup :show="showBool" @close="showBool=false" mode="center" round="20rpx">
			<view class="popup client-for backgroundf">
				<view class="title-cli size-32 color0 font-weight text-align">客户详情</view>
				<view class="miao color0 size-28 dis-cen">
					<view><text class="color9">客户名称：</text>我的名字较长</view>
					<button class="miao-cli button1 dis"><text class="size-24">置顶</text></button>
				</view>
				<view class="miao color0 size-28"><text class="color9">客户来源：</text>腾讯推广</view>
				<view class="miao color0 size-28"><text class="color9">跟进状态：</text>电话未接通</view>
				<view class="miao color0 size-28"><text class="color9">客户星级：</text>5星</view>
				<view class="miao color0 size-28"><text class="color9">申请时间：</text>2025.12.34 00:00:00</view>
				<view class="miao color0 size-28 flex">
					<text class="color9">条件备注：</text>
					<view class="miaos">这是条件备注条件备注条件备注条件 备注条件备注条件备注</view>
				</view>
				<button class="dials dis"><text class="size-28">立即拨号</text></button>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const showBool = ref(true)
</script>

<style lang="scss" scoped>
	.client {
		width: 100%;
		min-height: 100vh;
		background: #F5F7FF;
		padding: 24rpx;
		box-sizing: border-box;
		.miao {
			font-size: 26rpx;
			line-height: 40rpx;
			flex: 1;
		}
		.miaos{
			flex: 1;
		}
		.client-for {
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 32rpx 24rpx 20rpx;
			display: grid;
			gap: 20rpx;
		}

		.cen {
			color: #FE6900;
		}

		.dings {
			color: #3E79FD;
		}

		.size-32 {
			font-size: 32rpx;
		}

		.tiaos {
			width: 100%;
			height: 1px;
			background: #DDDDDD;
		}

		.button1,
		.button2 {
			width: 124rpx;
			height: 58rpx;
			padding: 0;
			border-radius: 100rpx;
			margin-left: 20rpx;
		}

		.button1 {
			background: rgba(62, 121, 253, .2);
			color: #3E79FD;
		}

		.button2 {
			background: #3E79FD;
			color: #ffffff;
		}

		.button1::after,
		.button2::after {
			border: 0;
		}
		.title-cli{
			padding: 40rpx 0 30rpx;
		}
		.popup{
			width: 600rpx;
			padding-bottom: 40rpx;
		}
		.dials{
			font-size: 28rpx;
			color: #ffffff;
			width: 440rpx;
			height: 72rpx;
			border-radius: 100rpx;
			background: #3E79FD;
			line-height: 72rpx;
		}
		.dials::after{
			border: 0;
		}
		.miao-cli{
			margin: 0!important;
		}
	}
</style>